<template>
  <div class="top_list">
    <el-dialog
      v-model="dialogVisibles"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      :show-close="false"
      title="分配使用组织"
      width="60%"
      draggable
    >
      <div>
        <div class="all">
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >全选</el-checkbox
          >
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox v-for="city in cities" :key="city.value" :label="city.value">{{
                city.label
              }}</el-checkbox>
          </el-checkbox-group>
      </div>
        <div class="customerTable">
          <el-table
            border
            class="tab_Background1"
            :data="multiple_list"
            height="300px"
            size="small"
          >
            <el-table-column
              empty-text="--"
              label="使用组织"
              prop="org_name"
              width="230"

            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.org_name,  '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户编码"
              prop="number"
              width="130"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.number,  '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户名称"
              prop="name"
              min-width="200"
            >
              <template #default="scope">
                <span class="ellipsis">
                  {{ scope.row.name || "--"}}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户状态"
              prop="status"
              width="100"
            >
              <template #default="scope">
                <span>
                  {{ status_name(scope.row.status)}}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户类别"
              prop="cust_type_name"
              width="150"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.cust_type_name,  '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户分组"
              prop="primary_group_name"
              show-overflow-tooltip
              width="150"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.primary_group_name,  '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="是否为集团客户"
              prop="is_group"
              width="130"
            >
              <template #default="scope">
                <el-tag
                  :type="scope.row.is_group === 1 ? 'success' : 'danger'"
                  disable-transitions
                >{{ scope.row.is_group == 1 ? '是' : '否' }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="结算币别"
              prop="trading_curr_name"
              width="100"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.trading_curr_name,  '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="价目表"
              prop="price_list_name"
              width="80"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.price_list_name,  '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="价目表编码"
              prop="price_list_number"
              width="100"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.price_list_number,  '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="发票类型"
              prop="invoice_type_name"
              width="100"
            >
              <template #default="scope">
                <span class="ellipsis">{{ scope.row.invoice_type_name && scope.row.invoice_type_name == 0 ? '--': scope.row.invoice_type_name || '--'}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="是否启用信用管理"
              prop="is_credit_check"
              width="140"
            >
              <template #default="scope">
                <el-tag
                  :type="scope.row.is_credit_check === 1 ? 'success' : 'danger'"
                  disable-transitions
                >{{ scope.row.is_credit_check == 1 ? '是' : '否' }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="创建人"
              prop="create_name"
              width="80"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.create_name,  '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="创建组织"
              prop="create_org_name"
              width="100"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.create_org_name,  '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="create_date"
              width="180"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.create_date,  '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="更新人"
              prop="update_name"
              width="100"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.update_name,  '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="更新组织"
              prop="modify_use_org"
              width="100"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.modify_use_org,  '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="更新时间"
              prop="update_date"
              width="180"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.update_date,  '')"
              ></span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer customerDialog3">
          <el-button  :loading="staging" type="primary" @click="share_save(props.statusType)">保存</el-button>
          <el-button  :loading="staging" @click="share_cancel">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {FieldFormat} from "/@/utils/utils";
import {defineProps, ref} from "vue";
import {customer_updateBatch} from "/@/api/dms/customer";
import {ElMessage} from "element-plus";

defineOptions({
  name: "AllocationOrganization"
  })
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
const  staging = ref(false)
const status_name =(va:any)=>{
  if(va == 0){
    return '暂存'
  }else if(va == 1){
    return  '待审核'
  }else if(va == 2){
    return  '已审核'
  }else if(va == 3){
    return '待完善'
  }else if(va == 4){
    return '已更新'
  }
}
const props = defineProps([
  'dialogVisible',
  'statusType',
  'multipleDate',
  'organizationList',
])
const dialogVisibles = ref(props.dialogVisible)
let multiple_list = reactive<any>([])
const share_value = ref('')
let share_options = reactive(props.organizationList || [])
let share_list = ref([])
const $emits = defineEmits([
  'update:dialogVisible',
  'update:statusType',
  'update:multipleDate',
  // 'update:multipleDate1',
])
const checkAll = ref(false)
const isIndeterminate = ref(false)
let checkedCities = ref<any>([])
let cities =reactive([])
const handleCheckAllChange = (val: boolean) => {
  if(val){
    checkedCities.value = cities.map((item:any)=>{
      return item.value
    })
  }else {
    checkedCities.value =[]
  }
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: any) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
onBeforeUpdate(() => {
  dialogVisibles.value = props.dialogVisible
  cities = props.organizationList
  checkedCities.value = props.multipleDate && props.multipleDate[0]?.use_org_id && props.multipleDate[0].use_org_id.split(",") || []
  share_list.value = checkedCities.value.map((value:any) => cities.find((obj:any) => obj.value === value)).map((item:any)=> item.label)
  if(share_list.value.length == 0){
    multiple_list = [
      {
        ...props.multipleDate[0],
        org_name: ''
      }
    ]
  }else {
    multiple_list = share_list.value.map((item:any)=>{
      return {
        ...props.multipleDate[0],
        org_name: item
      }
    })
  }
})
watchEffect(()=>{
  share_list.value = checkedCities.value.map((value:any) => cities.find((obj:any) => obj.value === value)).map((item:any)=> item.label)
  if(share_list.value.length == 0){
    multiple_list = [
      {
        ...props.multipleDate[0],
        org_name: ''
      }
    ]
  }else {
    multiple_list = share_list.value.map((item:any)=>{
      return {
        ...props.multipleDate[0],
        org_name: item
      }
    })
  }

})
const share_save = (va:any) => {
  staging.value = true
  customer_updateBatch({list:[...multiple_list],use_org_id:checkedCities.value.length > 0 ?checkedCities.value.toString(): '',use_org_name:''}).then((data:any)=>{
    if(data.code == 200) {
      staging.value =false
      $emits('update:dialogVisible', false)
      $emits('update:multipleDate', multiple_list)
      $emits('update:statusType', 0)
      ElMessage({
        message: '分配成功',
        type: 'success',
      })
    }else {
      staging.value =false
    }

  })
  // $emits('update:multipleDate1', multiple_list)
  // dialogVisible.value = false
  share_value.value = ''
  // multipleDate1 = multipleDate
}
const share_cancel = () => {
  $emits('update:dialogVisible', false)
  $emits('update:multipleDate', props.multipleDate)
  // $emits('update:multipleDate1', multiple_list1)
  share_value.value = ''
}
</script>

<style lang="scss" scoped>
@import '../index.scss';
.top_list{
  :deep(){
    .el-dialog__body{
      padding-top: 0px !important;
    }
  }
}
.all{
  margin-bottom: 20px;
}
</style>



